/* 
	Index of this CSS file
	
	(00) Portfolio Hover Zoom, Play, Doc & Flash Icons
	(01) 1 TO 4 Column Portfolio
	(02) Sortable Portfolio
	(03) Slides Portfolio	
	(04) Zoomer Portfolio
	(05) Popout Portfolio
	(06) Zoom-out Portfolio
	(07) Single Page Portfolio
*/

/* ========================================================== 
	(01) 1 TO 4 Column Portfolio
============================================================ */
	
.portfolio  p {	
	line-height:18px; 	 
	margin:0 0 5px 0;}	

.portfolio ul li {margin:0 18px 0 0;padding:0 0 20px 0; background:none;}
.portfolio ul li.last {margin-right:0;}	

.portfolio h3 {font-size:17px;font-weight:bold;margin:0 0 10px 0;  }
.pf-one-full h3 {font-size:24px; font-weight:normal; margin:15px 0 10px 0;  }

.portfolio h3,.portfolio h3 a ,.pf-one-full h3,.pf-one-full h3 a {	 
	color:#363636;; 
	display:block;
	text-decoration:none; 	
	padding:0;}
	
.portfolio h3 a:hover ,.pf-one-full h3 a:hover { color:#3F3F3F;}

.pf-one-half ul li, .pf-one-third ul li, .pf-one-fourth ul li {float:left;}

.pf-one-full           { width:960px;} /* Width of 1 Column Portfolio */
.pf-one-half ul li     { width:471px;} /* Width of 2 Column Portfolio */
.pf-one-third ul li   { width:308px;} /* Width of 3 Column Portfolio */
.pf-one-fourth ul li { width:226px;} /* Width of 4 Column Portfolio */

.pf-one-full  { 
	border-bottom:1px dotted #ccc; 
	margin-bottom:30px; 
	padding-bottom:8px; 
	margin-top:10px;}

.img-one-full, .img-one-half, .img-one-third, .img-one-fourth { 
	padding:9px 10px 17px 9px;
	clear:both;}

.img-one-full 	{ background:url(../images/backgrounds/portfolio-1col-bg.jpg) no-repeat left top; }
.img-one-half 	{ background:url(../images/backgrounds/portfolio-2col-bg.jpg) no-repeat left top; }	
.img-one-third  	{ background:url(../images/backgrounds/portfolio-3col-bg.jpg) no-repeat left top; }	
.img-one-fourth  { background:url(../images/backgrounds/portfolio-4col-bg.jpg) no-repeat left top; }	

/* ========================================================== 
	(2) Sortable Portfolio
============================================================ */

ul#sortable-portfolio-links { 
	list-style: none; 
	margin:0; 
	padding: 10px 0 0 0;  }  
	
ul#sortable-portfolio-links li { 
	float: left;  
	margin: 0 10px 0 0; 
	list-style: none; 
	background:none; 
	padding:0;}  
	
ul#sortable-portfolio-links li a { 
	font-size: 13px;	
	color:#363636;	
	text-decoration:none; 
	display: block; 	
	padding:5px 10px 5px 10px; 
	margin:0; 
	text-shadow: 1px 1px 0 #ffffff; 
	background-color:#ebebeb; 	
	border:1px solid #dadada;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	 }
	
ul#sortable-portfolio-links li a:hover { 	
	text-shadow: 1px 1px 0 #ffffff; 
	border:1px solid #bebebe; 
	background-color:#dadada;}
	
 ul#sortable-portfolio-links li a.current {
	color:#ffffff;
	background-color:#424242; 
	border:1px solid #323232; 	
	text-shadow: 1px 1px 0 #000;}

ul#sortable-portfolio { 
	float: left; 
	list-style: none;  
	padding:0;}  
	
ul#sortable-portfolio li { 
	float: left; 
	list-style: none; 
	margin: 0 18px 7px 0; 	
	padding:9px 9px 20px 9px; 
	background: url(../images/backgrounds/portfolio-4col-bg.jpg) no-repeat left top; }  
	
ul#sortable-portfolio li.last { margin-right:0;}
	
#sortable-portfolio p, #sortable-portfolio h3{ width:200px;}

/* ========================================================== 
	(03) Slides Portfolio
============================================================ */

.slides-portfolio { clear:both; margin-top:10px;}

.slides-portfolio-bg { 
	background:url(../images/backgrounds/slides-portfolio-bg.jpg) no-repeat left top; 	 
	width:308px;
	height:201px; 
	margin-bottom:10px; }

.slides-portfolio .slides-portfolio-box {     
	float:left;
	position:relative;
	width:295px;
	height:183px;	 
	overflow:hidden;
	margin:9px 0 0 9px; }
	 
.slides-portfolio img {
	top:0;
	left:0;
	position:absolute; }	 

.slides-portfolio p { padding:10px 15px 0 15px; line-height:19px; }

.slides-portfolio h3 { 	
	font-size:20px; 
	line-height:25px;  
	padding:15px 15px 0 15px ; 
	margin:0;}
	
.slides-portfolio .zoom-img { position:absolute; left:110px; right:0; margin-top:2px;}

/* ========================================================== 
	(4) Zoomer Portfolio
============================================================ */	
	
.zoomer-portfolio ul.thumb {
	float: left;
	list-style: none;
	margin:30px 0 10px 30px; 
	padding:0;
	width: 900px;}
	
.zoomer-portfolio ul.thumb li {
	margin: 0; 
	padding: 15px;
	float: left;
	position: relative;
	width: 120px;
	height: 120px;
	background:none;}
	
.zoomer-portfolio ul.thumb li img {
	background:url(../images/backgrounds/zoomer-portfolio-thumb-bg.jpg) no-repeat center center;
	width: 115px;    /* Width of Thumb Image */
	height: 115px;   /* Height of Thumb Image */ 
	border-radius:3px;
	padding:9px;	
	position: absolute;
	left: 0; 
	top: 0;
	-ms-interpolation-mode: bicubic; }
	
.zoomer-portfolio ul.thumb li img.hover {
	background:url(../images/backgrounds/zoomer-portfolio-hover-bg.png) no-repeat -1px -1px;
	margin:0;	
	border: none;}
	
.zoomer-portfolio .title{
	background:url(../images/backgrounds/zoomer-portfolio-caption.png) no-repeat center center;
	position:absolute;
	width:245px;
	height:35px;	
	line-height:27px;
	font-weight:normal;
	color:#dadada;
	padding:0;
	margin:0;
	text-align:center; 
	color: #fff; }
	
/* ========================================================== 
	(5) Popout Portfolio
============================================================ */

.popout-portfolio ul.columns {
	width: 960px;
	list-style: none;
	margin:10px 0 0 10px; 
	padding: 10px 0 0 0;
	clear:both;	
	background:none;
	text-shadow: 1px 1px 0 #171717;}
	
.popout-portfolio ul.columns li {
	width: 220px;
	float: left;
	display: inline;	
	margin: 0 20px 10px 0; 
	padding: 0;
	position: relative;
	background:none;}
	
.popout-portfolio ul.columns li:hover {z-index: 99;}

.popout-portfolio ul.columns li img {
	position: relative;
	border:2px solid #aaaaaa;
	filter: alpha(opacity=30);	
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";}
	
.popout-portfolio ul.columns li:hover img{
	z-index: 999;	
	border-width:2px;
	border-style:solid;
	border-top-color:#222;
	border-left-color:#222;
	border-bottom-color:#868686;
	border-right-color:#868686;	
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
	
.popout-portfolio ul.columns li .info {
	position: absolute;
	left: -10px; 
	top: -10px;
	padding: 210px 10px 20px;
	width: 224px;
	display: none;	
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	background-color:#585858;}
	
.popout-portfolio ul.columns li:hover .info {display: block;}

.popout-portfolio ul.columns li h2 {
	font-size: 20px;
	font-weight: normal;	
	padding:20px 0 0 0; 
	margin:0;
	color:#fff;}
	
.popout-portfolio ul.columns li p {
	padding:10px 0 0 0; 
	line-height:18px;
	margin:0; 
	color:#fff; 
	font-size:13px;}

.popout-portfolio  li.last { margin-right:0;}
	
/* ========================================================== 
	(6) Zoom Out Portfolio
============================================================ */

#zoomout-portfolio{ margin-top:10px; }

#zoomout-portfolio ul{ 
	margin:0; 
	padding:0;}

#zoomout-portfolio  li{ 
	margin:0 16px 8px 0; 
	padding:9px 0 0 9px; 
	width:300px; 
	height:199px; 
	float:left;
	background:url(../images/backgrounds/zoomout-thumb-bg.jpg) no-repeat left top;}

#zoomout-portfolio li a{
	float:left;
	width:290px;
	height:181px;
	margin:0;
	overflow:hidden;
	border:none;
	position:relative; }

#zoomout-portfolio-box a img  {
	border:none;
	position:absolute;   
	top:-96.5px;
	left:-150px;
	height:500px; }

#zoomout-portfolio  li.last { margin-right:0;}	

/* ========================================================== 
	(7) Single Page Portfolio
============================================================ */

#single-page-portfolio { background: url(../images/backgrounds/singlepage-border.jpg) no-repeat center 400px; margin-top:10px;}

/* Large Image Position */

.pika-image {
	position: relative; 
	height: 270px; 
	width: 612px;  
	padding: 10px;  
	background:url(../images/backgrounds/portfolio-1col-bg.jpg) no-repeat left top; 
	padding:9px 9px 27px 9px; 
	margin:0 10px 0 0;}	
	
.pika-image .animation, .pika-image .main-image {
	position: absolute; 
	top: 9px; 
	left: 9px;}
	
.pika-image .animation {
	display: 
	none;z-index:2;}
	
.pika-image img {border:0;}

.pika-image .caption {
	position: absolute; 
	background: url(../images/backgrounds/caption-bg.png);  	
	font-size: 12px; 
	color: #fafafa; 
	padding: 10px; 
	text-align: right; 
	bottom: 40px; 
	right: 10px;}
	
.pika-image .caption p {
	padding: 0; 
	margin: 0; 
	line-height: 14px;}
	
.pika-image .caption a { color:#fafafa; text-decoration:underline}

/* ==== Image Navigation ===================== */

.pika-imgnav a {
	position: absolute; 
	text-indent: -5000px; 
	display: block;
	z-index:3;}

.pika-imgnav a.previous, .pika-imgnav a.next , .pika-imgnav a.play, .pika-imgnav a.pause {
	height:25px; 
	width: 25px;
	margin-top: 130px; 
	cursor:pointer;	}

.pika-imgnav a.previous {
	background: url(../images/backgrounds/singlepage-controller.png) no-repeat left top; 	
	margin-left: 261px;}
	
.pika-imgnav a.previous:hover {background-position:0 -30px;} 

.pika-imgnav a.next {
	background: url(../images/backgrounds/singlepage-controller.png) no-repeat -60px 0; 
	margin-left: 323px; }
	
.pika-imgnav a.next:hover {background-position:-60px -30px;} 
	
.pika-imgnav a.play {
	background: url(../images/backgrounds/singlepage-controller.png) no-repeat -30px -30px; 
	margin-left: 292px;}
	
.pika-imgnav a.pause {
	background: url(../images/backgrounds/singlepage-controller.png) no-repeat -30px 0; 
	margin-left: 292px;}
	
ul#pikame{width:627px; height:117px;}
ul#pikame li { background:url(../images/backgrounds/singlepage-thumb-bg.jpg) no-repeat left top; padding:9px; margin:0 14px 0 0;}	
	
.pika-thumbs {
	margin:0; 
	padding:0; 
	overflow: hidden; 
	float:left; 
	clear:both; }
	
.pika-thumbs li a{
	float: left; 
	list-style-type: none; 
	width:74px; 
	cursor: pointer; 
	background: none;  
	margin:9px 9px 9px 9px; }
	
.pika-thumbs li:last {margin: 0;}

.clip {
	position:relative;
	width: 96px; 
	height: 70px; 
	text-align: center; 
	vertical-align: middle; 
	overflow: hidden;
	cursor:pointer;}
	
.clip span{
	position:absolute;
	top:5px;
	left:5px;
	display:block;}

/* ==== Text Navigation ===================== */

.pika-textnav {
	overflow: hidden; 
	padding: 125px 0 0 0; 
	display:none; /* << Remove "display:none" to show Text Navigation */ }
	
.pika-textnav a {
	font-size: 12px; 
	text-decoration: none; 
	font-family:  helvetica, arial, sans-serif; 
	color: #333;  	
	background-color:#ebebeb; 	
	border:1px solid #dadada; 	 
	text-shadow: 1px 1px 0 #ffffff; 	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;}
	
.pika-textnav a:hover {
	background: #e5e5e5; 
	color:#363636;
	border:1px solid #bebebe; 
	background-color:#dadada;}
	
.pika-textnav a.previous, .pika-textnav a.next { 
	width: auto; 
	display: block;
	cursor:pointer; 
	padding: 5px 10px 5px 10px;}
	
.pika-textnav a.previous {float: left;}
.pika-textnav a.next {float: right;}